<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title -->
    <title>Home</title>

    <!-- Favicon -->
    <link rel="icon" href="img/material/icon.jpg">

    <!-- Blog css -->
    <link rel="stylesheet" href="css/blog.css">

    <!-- Style CSS -->
    <link rel="stylesheet" href="style.css">

</head>
<style>
    .blog-submit{
        margin-bottom: 200px;
    }
</style>
<body>
    <!-- Preloader -->
    <div id="preloader">
        <div class="preload-content">
            <div id="original-load"></div>
        </div>
    </div>

    <!-- Subscribe Modal -->
    <div class="subscribe-newsletter-area">
        <div class="modal fade" id="subsModal" tabindex="-1" role="dialog" aria-labelledby="subsModal"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <div class="modal-body">
                        <h5 class="title">Subscribe to my newsletter</h5>
                        <form action="#" class="newsletterForm" method="post">
                            <input type="email" name="email" id="subscribesForm2" placeholder="Your e-mail here">
                            <button type="submit" class="btn original-btn">Subscribe</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Header Area Start -->
    <header class="header-area">
        <!-- Top Header Area -->
        <div class="top-header">
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <!-- Breaking News Area -->
                    <div class="col-12 col-sm-8">
                        <div class="breaking-news-area">
                            <div id="breakingNewsTicker" class="ticker">
                                <ul>
                                    <li><a href="#">Hello World!</a></li>
                                    <li><a href="#">Hello Universe!</a></li>
                                    <li><a href="#">Hello Original!</a></li>
                                    <li><a href="#">Hello Earth!</a></li>
                                    <li><a href="#">Hello Colorlib!</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- Top Social Area -->
                    <div class="col-12 col-sm-4">
                        <div class="top-social-area">
                            <h5>手动@全世界第一乖林小乖</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Logo Area -->
        <div class="logo-area text-center">
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <div class="col-12" style="display: none;">
                        <a href="index.html" class="original-logo"><img src="img/font/pic3.png" alt=""></a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Nav Area -->
        <div class="original-nav-area" id="stickyNav">
            <div class="classy-nav-container breakpoint-off">
                <div class="container">
                    <!-- Classy Menu -->
                    <nav class="classy-navbar justify-content-between">

                        <!-- Subscribe btn -->
                        <div class="subscribe-btn">
                            <a href="#" class="btn subscribe-btn" data-toggle="modal"
                                data-target="#subsModal">Subscribe</a>
                        </div>

                        <!-- Navbar Toggler -->
                        <div class="classy-navbar-toggler">
                            <span class="navbarToggler"></span>
                        </div>

                        <!-- Menu -->
                        <div class="classy-menu" id="originalNav">
                            <!-- close btn -->
                            <div class="classycloseIcon">
                                <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                            </div>

                            <!-- Nav Start -->
                            <div class="classynav">
                                <ul>
                                    <li><a href="login.html">login</a>
                                    <li><a href="index.html">Home</a></li>
                                    <li><a href="blog.html">blog</a></li>
                                    </li>
                                    <li><a href="diaries.html">DIARIES</a></li>
                                    <li><a href="friendshiplink.html">friendshiplink</a></li>
                                    <li><a href="comments.html">comments</a></li>
                                </ul>

                                <!-- Search Form  -->
                                <div id="search-wrapper">
                                    <form action="#">
                                        <input type="text" id="search" placeholder="Search something...">
                                        <div id="close-icon"></div>
                                        <input class="d-none" type="submit" value="">
                                    </form>
                                </div>
                            </div>
                            <!-- Nav End -->
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <!-- ##### Header Area End ##### -->

    <!-- ##### Blog Area Start ##### -->
    <div class="container">

        <div class="post-a-comment-area mt-70" id="post-a-comment-area">
            <h5>Blog</h5>
            <!-- Reply Form -->
            <form action="#" method="post">
                <div class="row">
                    
                    <div class="col-12 col-md-6">
                        <div class="group">
                            <input type="text" name="name" id="name" required>
                            <span class="highlight"></span>
                            <span class="bar"></span>
                            <label>Name</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <span class="button btn blog-button">
                            <input type="file" name="pic" id="pic" class="inputfile" value="插入图片" accept="image"
                                onchange="changepic(this)" />
                            <label for="pic" class='btn' style="color: white;text-align: cen;">插入图片</label>
                        </span>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="group">
                            <!-- <input type="email" name="email" id="email" required>
                                    <span class="highlight"></span>
                                    <span class="bar"></span>
                                    <label>Email</label> -->
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="group">
                            <input type="text" name="subject" id="subject" required>
                            <span class="highlight"></span>
                            <span class="bar"></span>
                            <label>Subject</label>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="group">
                            <div class="insertpic">
				
                                <img src="" id="show" />
                            </div>
                            <textarea name="message" id="message" required></textarea>
                            <span class="highlight"></span>
                            <span class="bar"></span>
                            <label>Blog</label>
                        </div>
                    </div>
                    <div class="col-12">
                        <a class="btn original-btn blog-submit" id="blog-repaly">Submit</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- ##### Blog Area End ##### -->

    <!-- ##### Footer Area End ##### -->
    <!-- <a id="scrollUp" href="#top">Top</a> -->

    <!-- jQuery (Necessary for All JavaScript Plugins) -->
    <script src="js/jquery/jquery-2.2.4.min.js"></script>
    <!-- Popper js -->
    <script src="js/popper.min.js"></script>
    <!-- Bootstrap js -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Plugins js -->
    <script src="js/plugins.js"></script>
    <!-- Active js -->
    <script src="js/active.js"></script>
    <!-- Index js -->
    <script src="js/index.js"></script>

    <script src="js/blog.js"></script>


</body>

</html>
<script>
    function changepic() {
        var reads = new FileReader(); //创建一个文件读取对象
        f = document.getElementById('pic').files[0];
        reads.readAsDataURL(f);
        reads.onload = function(e) {
            document.getElementById('show').src = this.result;
        }
    }
    
</script>